<template>
    <div class="container">
<!--        添加，移除书架提示-->
        <div v-if="xiaoxi" class="xiaoxi">
            <div class="gou"><i class="iconfont icon-duihao"></i></div>
            <div>{{xiaoxi_content}}</div>
        </div>
<!--        头部-->
        <div class="top">
            <div class="left">
                <a @click="routerback"><img src="../assets/img/back.png"><span>书籍详情</span></a>
            </div>
            <div class="right">
                <router-link to="/index"><span>书城</span><img src="../assets/img/home.png"></router-link>
            </div>
        </div>
<!--        书籍内容-->
        <div class="content">
            <div class="intro">
                <!--书籍图片-->
                <div class="intro_tu">
                    <img :src="books.ImageUrl ? books.ImageUrl:''">
                </div>
                <!--书籍介绍-->
                <div class="intro_right">
                    <p class="intro_title">{{books.Title}}</p>
                    <span class="intro_fenlei">{{books.TagName}}</span><br>
                    <div class="intro_state">{{books.Author}}</div>
                    <div class="intro_state"><span class="state">{{state}}</span> | {{init_words(books.Words)}}万字</div>
                    <div class="intro_bookarck" @click="shou_search()" v-if="show">加入书架</div>
                    <div class="intro_bookarck" @click="yichu_search()" v-else>移除书架</div>
                </div>
            </div>
            <div class="content_1">
                <h5>内容简介：</h5>
                <p class="intro_intro">{{books.Description}}</p>
            </div>
            <div class="catalog">
                <router-link :to="{path:'/catalog',query:{id:search.Id,num:total,vip_chapter:books.VipChapterIndex}}"><span>目录</span><span class="total"><span>共{{total}}章<img src="../assets/img/back.png"></span></span></router-link>
                <div class="chapter">
                    <p class="zuixin">
                        <router-link :to="{path:'/read',query:{id:search.Id,chapter_Index:newest_id}}">最新章节：{{newest_title}}</router-link>
                    </p>
                    <div class="zhang">
                        <p v-for="chapter in chapters" :key="chapter.ID">
                            <router-link :to="{path:'/read',query:{id:books.ID,chapter_Index:chapter.Index}}" >{{chapter.Title}}</router-link>
                        </p>
                    </div>
                </div>
            </div>
            <div class="footer">
                <router-link :to="{path:'/read',query:{id:search.Id,chapter_Index:last_chapter}}" class="yuedu">开始阅读</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "book_details",
        data() {
            return{
                search: {
                    Id: this.$route.query.id,
                },
                books: [], // 显示的图书列表
                chapters: [],
                last_chapter: "",
                show: true,
                newest_title: '',
                newest_id: '',
                total: '',
                state: '',
                xiaoxi: false,
                xiaoxi_content: '添加成功'
            }
        },
        created: function(){
            this.set()
            this.start_search();
            this.chapters_search();
            this.yishou_search();
            this.newest()
            this.sum()
        },
        methods: {
            //子组件传值
            set:function(){
                this.$emit('set','hide')
            },
            //返回上一页
            routerback: function () {
                this.$router.back(-1)
            },
            //小说字数
            init_words: function(words) {
                return (words/10000).toFixed(1)
            },
            // 书籍详情
            start_search: function() {
                this.books;
                this.$axios.get( "/book-infos", {params:{BookIDs:[this.search.Id]}}).then(response=>{
                    if(response.data.books) {
                        this.books = response.data.books[0];
                        this.search.tag_id = response.data.books[0].TagID;
                        document.title = response.data.books[0].Title;
                        if(this.books.Finished==1){
                            this.state='已完结';
                        }else {
                            this.state = "连载中";
                        }
                    }else if(!response.data.redirect) {
                        alert('当前书籍已下架');
                    }
                })
            },
            //章节总数
            sum:function(){
                this.$axios.get("/count-chapters",{params: {BookID:this.search.Id}}).then(response=>{
                    if(response.data){
                        this.total=response.data.total;
                    }
                })
            },
            //最新章节
            newest:function(){
                this.$axios.get("/chapter",{params:{BookID:this.search.Id,Index:-1}}).then(response=>{
                    this.newest_title=response.data.chapter.Title;
                    this.newest_id=response.data.chapter.Index;
                })
            },
            //目录
            chapters_search: function() {
                this.$axios.get("/chapters",{params:{BookID:this.search.Id,Limit:10,Offset:0}}).then(response=>{
                    if(response.data.chapters) {
                        this.chapters = response.data.chapters;
                        this.last_chapter = response.data.chapters[0].Index
                    }
                })
            },
            //添加书架
            shou_search: function() {
                // let postData = this.$qs.stringify({ BookID:this.search.Id});
                this.$axios.post('/collect-book?',null,{params:{BookID:this.search.Id}})
                this.show = !this.show
                this.xiaoxi_content = '添加成功'
                this.xiaoxi = true
                setTimeout(()=>{
                    this.xiaoxi = false
                },1000)
            },
            //移除书架
            yichu_search:function(){
                this.$axios.delete('/collect-books',{params:{BookIDs:[this.search.Id]}})
                this.show = !this.show
                this.xiaoxi_content = '移除成功'
                this.xiaoxi = true
                setTimeout(()=>{
                    this.xiaoxi = false
                },1000)
            },
            yishou_search: function() {
                this.$axios.get('/check-book-collect',{params:{BookID:this.search.Id}}).then(response=>{
                    if(response.data.collected==true){
                        this.show=false
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .container {
        background: white;
        margin-bottom: 50px;
        padding: 0px;
    }
    h5{
        margin: 0px;
    }
    .xiaoxi{
        position: fixed;
        top: 40%;
        left: 40%;
        z-index: 1000;
        width: 20%;
        height: 14vh;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.7rem;
        border-radius: 6px;
        background: rgba(58,58,58,.9);
        color: white;
        letter-spacing:1px;
    }
    .gou{
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid white;
        border-radius: 50%;
        margin-bottom: 13px;
    }
    .top {
        margin-bottom: 15px;
        padding: 10px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        background: #ebebeb;
    }

    .left a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .right a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .left a,
    .right a {
        color: black;
        text-decoration: none;
    }

    .top img {
        width: 2rem;
    }

    .top span {
        font-size: 1rem;
    }

    .intro {
        margin-top: 20px;
        display: flex;
        text-decoration: none;
        color: black;
        border-bottom: 8px solid #f5f5f5;
        padding-bottom: 20px;
    }

    .intro img {
        width: 7rem;
        height: 10rem;
        margin-left: 15%;
        border-radius: 6px;
        -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }

    .intro_right {
        margin-left: 35px;
        margin-right: 15px;
    }

    .intro_title {
        font-size: 1.3rem;
        margin: 0px 0px 8px;
    }

    .intro_writer {
        color: #c1c1c1;
        font-size: 10px;
    }

    .intro_fenlei {
        text-align: center;
        font-size: 0.9rem;
        color: #989898;
    }

    .intro_state {
        margin-top: 10px;
        margin-bottom: 15px;
        font-size: 0.9rem;
    }

    .intro_bookarck {
        margin-top: 10px;
        border: 1px solid #5b8fff;
        width: 5rem;
        text-align: center;
        font-size: 0.9rem;
        color: #5b8fff;
        border-radius: 4px;
    }

    .content_1 {
        padding: 10px 15px;
        position: relative;
        border-bottom: 8px solid #f5f5f5;
    }

    .intro_intro {
        color: #9f9f9f;
        font-size: 0.9rem;
        overflow: hidden;
        text-indent: 1em;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .catalog p ,.catalog>a{
        display: flex;
        align-items: center;
        padding: 10px 6px 10px 15px;
        justify-content: space-between;
        border-bottom: 1px solid #dddddd;
        margin: 0px;
        font-size: 1rem;
    }

    .catalog p span:nth-child(2) {
        color: #9f9f9f;
    }

    .catalog img {
        width: 1.9rem;
        transform: rotate(180deg);
        background: white;
    }

    .catalog>a{
        color: #9f9f9f;
        text-decoration: none;
    }

    .catalog>a>span{
        display: block;
    }

    .chapter {
        padding: 0px 15px;
        border-bottom: 8px solid #fff;
    }

    .chapter p {
        padding-left: 0px;
        display: flex;
        justify-content: flex-start;
        margin-top: 0px;
    }

    .chapter p:nth-last-child(1) {
        border-bottom: none;
    }
    .zuixin a{
        color: #5b8fff;
        text-decoration: none;
        width: 100%;
        font-size: 1rem;
    }
    .total span{
        color: #9f9f9f;
        text-decoration: none;
        display: flex;
        align-items: center;
    }
    .zhang a{
        text-decoration: none;
        color: black;
        width: 100%;
        font-size: 1rem;
    }
    .footer{
        position:fixed;
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 1.1rem;
        text-align: center;
        bottom: 0px;
        background: white;
        border-top: 1px solid #dddddd;
    }
    .yuedu{
        padding: 5px;
        margin: 10px;
        width: 95%;
        background: #3688ff;
        border-radius: 5px;
    }
    .footer a{
        color: white;
        text-decoration: none;
    }
</style>
